<template>
  <div>
    <div class="headerBox">
      <div class="top"><img src="../assets/logo.png" alt="" /></div>
      <div class="con">
        <div class="imgBox"><img src="../assets/home-diy.png" alt="" /></div>
        <div class="tit1">
          <h2>电脑定制</h2>
        </div>
        <div class="tit2">
          <h3>累计服务用户数超过</h3>
        </div>
        <div class="tit3">
          <p>19,408,034</p>
        </div>
      </div>
      <div class="btnGroup">
        <button class="btn seBtn">按外观定制</button>
        <button class="btn">按游戏定制</button>
      </div>
      <div class="moving-img">
        <img src="../assets/向下箭头.png" alt="Moving Image" />
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="lbt">
      <h1>更多定制方案</h1>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide s1">
            <p class="tle">按预算定制</p>
            <div class="midl">
              <p>打造专属性价比，</p>
              <p>预算之内尽享高性能!</p>
            </div>
          </div>
          <div class="swiper-slide s2">
            <p class="tle">按显卡定制</p>
            <div class="midl">
              <p>DIY游戏电脑 视觉盛宴</p>
              <p>流畅体验全掌握！</p>
            </div>
          </div>
          <div class="swiper-slide s3">
            <p class="tle">按CPU定制</p>
            <div class="midl">
              <p>CPU随心配 速度激情两不误</p>
              <p>游戏战场任你主宰</p>
            </div>
          </div>
        </div>
        <!--如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!--如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
    <!-- 配件分类 -->
    <div class="pjBox">
      <button>
        <img src="../assets/显示器Pc.png" alt="" />
        显示器
      </button>
      <button>
        <img src="../assets/鼠标.png" alt="" />
        鼠标
      </button>
      <button>
        <img src="../assets/键盘.png" alt="" />
        键盘
      </button>
      <button>
        <img src="../assets/耳机.png" alt="" />
        耳机
      </button>
    </div>
    <!-- 发现 -->
    <div class="finde">
      <h1>发现</h1>
      <div class="goods">
        <div class="goa">
          <!-- 第一行 -->
          <div class="frow">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/icon/h1.png"
              alt=""
            />
            <p>键盘</p>
          </div>
          <p class="heat">随心定制</p>
          <img
            src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20241013/20241013022149914202.png"
            alt=""
            class="heMg"
          />
          <button class="tprc">立享补贴价</button>
        </div>
        <div class="gob">
          <div class="frow">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/icon/h2.png"
              alt=""
            />
            <p>秒杀</p>
          </div>
          <p class="heat">天天超低价</p>
          <img
            src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20241013/20241013022156822463.png"
            alt=""
            class="heMg"
          />
          <button class="tprc">立享补贴价</button>
        </div>
        <div class="goc">
          <div class="frow">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/mp-weixin-white/icon/h3.png"
              alt=""
            />
            <p>活动</p>
          </div>
          <p class="heat">领年终红包</p>
          <img
            src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20241029/20241029145231594988.png"
            alt=""
            class="heMg"
          />
          <button class="tprc">立享补贴价</button>
        </div>
      </div>
    </div>
    <!-- 原创产品 -->
    <div class="goodSwiper">
      <h1>原创产品</h1>
      <div class="con">
        <div class="new-swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="imgBbox">
                <div class="routeAZ"></div>
              </div>
            </div>
            <div class="swiper-slide">
              <p class="tle">新品2</p>
              <div class="midl">
                <p>新品2描述</p>
              </div>
            </div>
            <!-- 添加更多滑块 -->
          </div>
          <!-- 分页器 -->
          <div class="new-swiper-pagination"></div>
        </div>
      </div>
    </div>
    <btn1></btn1>
  </div>
</template>


<style lang="scss" scoped>
.lbt {
  width: 7.5rem;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.4rem;
  h1 {
    font-size: 0.32rem;
    font-weight: bold;
    margin-bottom: 0.1rem;
  }
  .swiper {
    width: 6.7rem;
    height: 3rem; /* 设置适合的高度 */
    margin: 0;
    z-index: -1;
    background-color: #000;
    border-radius: 0.3rem;
    .s1 {
      background: url("../assets/image1.png") no-repeat !important;
      background-size: 6.7rem 3rem !important;
      // background-position: center -2rem;
    }
    .s2 {
      background: url("../assets/image2.png") no-repeat !important;
      background-size: 6.7rem 3rem !important;
      // background-position: center -2rem;
    }
    .s3 {
      background: url("../assets/image3.png") no-repeat !important;
      background-size: 6.7rem 3rem !important;
      // background-position: center -2rem;
    }
    .tle {
      color: #fff;
      font-size: 0.31rem;
      margin-bottom: 0.12rem;
    }
    .midl {
      font-size: 0.22rem;
      color: #a7a7a7;
    }
    .swiper-pagination-bullet-active {
      background-color: #fff !important; /* 小点的颜色 */
    }

    .swiper-slide {
      // display: flex;
      // justify-content: center;
      // align-items: center;

      padding: 0.55rem 0 0.2rem 0.4rem;
      box-sizing: border-box;
      img {
        width: 100%;
        max-width: 100%; /* 确保图片不会超出轮播图容器 */
        max-height: 100%; /* 确保图片不会超出轮播图容器 */
      }
    }
  }
}

.app {
  height: 100rem;
}
.headerBox {
  width: 7.5rem;
  height: 11.7rem;
  background: url("../assets/微信图片_20241127120935.png") no-repeat;
  background-size: cover;
  background-position: center -2rem;
  .top {
    width: 7.5rem;
    text-align: center;
    padding-top: 0.24rem;
    img {
      width: 1.7rem;
      height: 0.4rem;
    }
  }
  .con {
    width: 7.5rem;
    overflow: hidden;
    margin-top: 1rem;
    .imgBox {
      width: 7.5rem;
      text-align: center;
      overflow: hidden;
      img {
        width: 3.5rem;
        height: 1.6rem;
      }
    }
    .tit1 {
      text-align: center;
      color: #fff;
      h2 {
        font-weight: bolder;
      }
      font-size: 0.54rem;
    }
    .tit2 {
      text-align: center;
      color: #fff;
    }
    .tit3 {
      text-align: center;
      font-size: 0.6rem;
      // font-family: "";
      color: #fff;
      margin-top: 0.1rem;
      p {
        // font-weight: 1200 !important;
        font-weight: bolder;
      }
    }
  }
  .btnGroup {
    width: 7.5rem;
    overflow: hidden;
    display: flex;
    padding: 0 0.28rem;
    box-sizing: border-box;
    justify-content: space-between;
    .btn {
      width: 3.3rem;
      height: 0.8rem;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 0.4rem;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.32rem;
      color: #fff;
      margin-top: 4.7rem;
    }
    .seBtn {
      background-color: #fff;
      color: #000;
    }
  }
  .moving-img {
    text-align: center;
    position: relative;
    width: 7.5rem; /* 根据实际图片大小调整 */
    height: 0.3rem; /* 根据实际图片大小调整 */
    animation: moveUpDown 1.5s ease-in-out infinite;
    margin-top: 0.2rem;
    img {
      width: 0.25rem;
      height: 0.26rem;
    }
  }
}
.pjBox {
  display: flex;
  height: 1rem;
  margin-top: 0.24rem;
  justify-content: space-around;
  // width: 7.55rem;
  overflow: hidden;
  padding-left: 0.1rem;
  button {
    background: #fff;
    height: 0.6rem;
    border: 0.01rem solid #b9b7b7;
    padding: 0 0.15rem;
    // box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 0.3rem;
    flex-direction: row;
    border-radius: 0.3rem;
    img {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.1rem;
    }
  }
}
.finde {
  width: 7.5rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  h1 {
    font-weight: 800;
    font-size: 0.32rem;
    margin-top: 0.2rem;
  }
  .goods {
    display: flex;
    margin-top: 0.36rem;

    .goa {
      width: 2.03rem;
      height: 3.3rem;
      background-color: #6b66da;
      box-sizing: border-box;
      margin-right: 0.32rem;
      border-radius: 0.2rem;
      padding: 0.3rem 0.1rem 0.35rem 0.2rem;
      .frow {
        display: flex;
        justify-content: start;
        img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1rem;
        }
        p {
          font-size: 0.3rem;
          font-weight: bold;
          color: #000;
        }
      }
      .heat {
        color: #000;
      }
      .heMg {
        width: 1.64rem;
        height: 1.64rem;
      }
      .tprc {
        width: 1.56rem;
        height: 0.44rem;
        line-height: 0.44rem;
        border-radius: 0.2rem;
        background-color: #000;
        border: 0.01rem solid #fff;
        color: #fff;
        font-size: 0.19rem;
        margin-left: 0.05rem;
      }
    }
    .gob {
      width: 2.03rem;
      height: 3.3rem;
      background-color: #fb5d2b;
      margin-right: 0.33rem;
      border-radius: 0.2rem;
      padding: 0.3rem 0.1rem 0.35rem 0.2rem;
      box-sizing: border-box;
      .frow {
        display: flex;
        justify-content: start;
        img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1rem;
        }
        p {
          font-size: 0.3rem;
          font-weight: bold;
          color: #000;
        }
      }
      .heat {
        color: #000;
      }
      .heMg {
        width: 1.64rem;
        height: 1.64rem;
      }
      .tprc {
        width: 1.56rem;
        height: 0.44rem;
        line-height: 0.44rem;
        border-radius: 0.2rem;
        background-color: #000;
        border: 0.01rem solid #fff;
        color: #fff;
        font-size: 0.19rem;
        margin-left: 0.05rem;
      }
    }
    .goc {
      width: 2.03rem;
      height: 3.3rem;
      background-color: #63bf63;
      border-radius: 0.2rem;
      padding: 0.3rem 0.1rem 0.35rem 0.2rem;
      box-sizing: border-box;
      .frow {
        display: flex;
        justify-content: start;
        img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1rem;
        }
        p {
          font-size: 0.3rem;
          font-weight: bold;
          color: #000;
        }
      }
      .heat {
        color: #000;
      }
      .heMg {
        width: 1.64rem;
        height: 1.64rem;
      }
      .tprc {
        width: 1.56rem;
        height: 0.44rem;
        line-height: 0.44rem;
        border-radius: 0.2rem;
        background-color: #000;
        border: 0.01rem solid #fff;
        color: #fff;
        font-size: 0.19rem;
        margin-left: 0.05rem;
      }
    }
  }
}
.goodSwiper {
  width: 7.5rem;
  overflow: hidden;
  padding: 0 0.4rem 0 0.4rem;
  box-sizing: border-box;
  h1 {
    font-weight: 800;
    font-size: 0.32rem;
    margin-top: 0.36rem;
  }
  .con {
    width: 100%;
    height: 4.5rem;
    background: #fff;
    margin-top: 0.2rem;
    .new-swiper {
      width: 6.7rem;
      height: 4.5rem;
      margin: 0;
      z-index: -1;
      background-color: #fff;
      border-radius: 0.3rem;
      .swiper-slide {
        padding: 0.55rem 0 0.2rem 0.4rem;
        box-sizing: border-box;
        .imageBbox {
          width: 4.2rem;
          height: 100% !important;
          // display: flex;
          // justify-content: center;
          .routeAZ {
            width: 100%;
            height: 4.2rem;
            background-image: url("../assets/20241028102955057769.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .tle {
        color: #fff;
        font-size: 0.31rem;
        margin-bottom: 0.12rem;
      }

      .swiper-pagination-bullet-active {
        background-color: #fff !important;
      }
    }
  }
}
</style>
<script>
import btn1 from "../components/botButton.vue";
export default {
  data() {
    return {};
  },
  components: {
    btn1,
  },
};
</script>